<template>

  <p>文章列表总数：{{ articleList.length }}</p>

  <div v-for="(article,index) in articleList">
    <h1>序号：{{ index + 1 }}</h1>
    <img v-bind:src="article.imgUrl" alt="图片" style="width: 100px" />
    <h2>本地图片</h2>
    <img src="../assets/img.png" alt="图片" style="width: 100px" />
    <h2>欢迎来到：{{ article.title }}</h2>
    <h4>摘要：{{ article.summary }}</h4>
    <p>作者：{{ article.author }} 阅读量：{{ article.readCt }}</p>
  </div>

</template>

<script setup>

import {ref} from "vue";

const articleList = ref([{
      title: "一小时构建Vue知识体系-default",
      summary: "关注方才兄，一小时构建Vue知识体系-default",
      author: "方才",
      imgUrl: "https://fangcaicoding.cn/oss/cover/css_learn.png",
  readCt: 12
    }
    ]
)

const addArticle = () => {
  articleList.value.push({
    title: "一小时构建Vue知识体系-" + Math.floor(Math.random() * 100),
    summary: "关注方才兄，一小时构建Vue知识体系-3",
    author: "方才3",
    readCt: Math.floor(Math.random() * 100)
  })
}


</script>


<style scoped>

</style>